<template>
  <div class="betterScroll">
    <div class="foodList">
      <div class="left-nav-warray" ref="left-nav-warray">
        <ul>
          <li
            @click="clickLi(index)"
            v-for="(item, index) of 20"
            :key="item"
            :class="[
              index === activeIndex ? 'currentNav' : '',
              index === activeIndex - 1 ? 'borderTopNav' : '',
              index === activeIndex + 1 ? 'borderBottomNav' : ''
            ]"
          >
            新店优惠{{ index }}
          </li>
        </ul>
      </div>
      <div class="right-content-warray" ref="right-content-warray">
        <div>
          <div v-for="(item, index) of contentList" :key="index" class="content-item">
            <dl>
              <dt>新店优惠</dt>
              <dd>
                <div>
                  <img
                    src="https://p0.meituan.net/wmproduct/eec63277574bff88054107ca6537ae26131755.jpg@300w"
                    alt=""
                    class="img"
                  />
                </div>
                <div>
                  <div>
                    <span>文案</span>
                    <stepper v-model="item.num"></stepper>
                  </div>
                </div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <footer class="footerCart">
      <transition
        name="dot"
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        v-for="(item, index) of dotList"
        :key="item.id"
      >
        <div class="dot" v-if="item.showDot">{{ index }}</div>
      </transition>
      <div>指定目标</div>
    </footer>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { getElementDoms, setStyle, getElementDom } from '@/utils/domUtil'

export default {
  name: 'betterScroll',
  data() {
    return {
      showDot: false,
      navList: [],
      dotList: [
        {
          id: 1,
          showDot: false
        },
        {
          id: 2,
          showDot: false
        },
        {
          id: 3,
          showDot: false
        },
        {
          id: 4,
          showDot: false
        }
      ],
      dropBalls: [],
      contentList: [
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        },
        {
          num: 0
        }
      ],
      activeIndex: 0,
      scrollNav: null,
      scrollContent: null,
      contentCurrentY: 0,
      contentHeightMapList: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    beforeEnter(el) {
      setStyle(el, {
        left: this.x + 'px',
        top: this.y + 'px'
      })
    },
    enter(el, done) {
      this.$nextTick(() => {
        // 触发回流 不加这个动画效果无 🔽
        el.offsetTop
        setStyle(el, {
          display: 'block',
          transition: `top 0.3s cubic-bezier(0.49, -0.29, 0.75, 0.41),left 0.3s linear`,
          left: 0,
          top: 0
        })
        done()
      })
    },
    afterEnter(el) {
      setTimeout(() => {
        const ball = this.dropBalls.shift()
        if (ball) {
          ball.showDot = false
          el.style.display = 'none'
        }
      }, 300)
    },
    // 初始化
    init() {
      this.$root.$on('add', this.addDot)
      this.$nextTick(() => {
        this.scrollNav = new BScroll(this.$refs['left-nav-warray'], {
          click: true,
          probeType: 3,
          bounce: {
            top: false,
            bottom: false
          }
        })
        this.scrollContent = new BScroll(this.$refs['right-content-warray'], {
          click: true,
          probeType: 3
        })
        this.getContentHeightMap()
        this.scrollContent.on('scroll', this.getContentCurrentHeight)
      })
    },
    // 添加dot
    addDot(target) {
      const { x, y } = target.getBoundingClientRect()
      const { y: y1 } = getElementDom('.footerCart').getBoundingClientRect()
      this.y = -(y1 - y + 20)
      this.x = x
      for (let i = 0; i < this.dotList.length; i++) {
        const ball = this.dotList[i]
        if (!ball.showDot) {
          ball.el = target
          this.dropBalls.push(ball)
          ball.showDot = true
          return
        }
      }
    },
    // 点击li
    clickLi(i) {
      this.scrollContent.scrollToElement(Array.from(getElementDoms('.content-item'))[i], 200)
    },
    // 生成每个内容列表map
    getContentHeightMap() {
      const contentItem = getElementDoms('.content-item')
      contentItem.forEach((v, i) => {
        this.contentHeightMapList.push({
          index: i,
          ySection: [v.offsetTop, v.offsetTop + v.offsetHeight]
        })
      })
    },
    // 监测y当前位置
    getContentCurrentHeight({ y }) {
      this.contentCurrentY = -y
      this.contentHeightMapList.forEach((v, i) => {
        if (v.ySection[0] <= this.contentCurrentY && this.contentCurrentY <= v.ySection[1]) {
          this.activeIndex = i
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.flex-center {
  display: flex;
}
.betterScroll {
  height: calc(100vh - 92px);
  .foodList {
    display: flex;
    height: calc(100% - 96px);
    .left-nav-warray {
      width: 160px;
      overflow-y: hidden;
      background-color: #fff;
      -webkit-overflow-scrolling: touch;
      li {
        height: 100px;
        line-height: 100px;
        text-align: center;
        background-color: coral;
      }
      .currentNav {
        background-color: #fff;
      }
      .borderTopNav {
        border-radius: 0 0 20px 0;
      }
      .borderBottomNav {
        border-radius: 0 20px 0 0;
      }
    }
    .right-content-warray {
      position: relative;
      flex: 1;
      overflow-y: hidden;
      background-color: #fff;
      > div {
        padding: 0 20px;
      }
      .img {
        width: 150px;
        height: 150px;
      }
      dl {
        padding-bottom: 20px;
      }
      dd {
        .flex-center();
      }
    }
  }
  .footerCart {
    position: relative;
    height: 96px;
    .dot {
      position: absolute;
      width: 30px;
      height: 30px;
      background: darkgoldenrod;
      border-radius: 100%;
      z-index: 9999;
    }
  }
}
</style>
